(function () {  
    let container2 = document.querySelector('.container2'),
    wrapper = container2.querySelector('.wrapper'),
    slides = wrapper.querySelectorAll('.slide'),
    [btnPrev1,btnNext1] = Array.from(container2.querySelectorAll('.btn'))
    
    let count = slides.length,
    step = 0,
    prev = step

/* 默认选中 */
slides[step].style.cssText = 'z-index:1;opacity:1'




// 向右/向左切换
const move = function move() {
    let slideNow = slides[step],
        slidePrev = slides[prev]
    // 先改层级
    slideNow.style.zIndex = 1
    slidePrev.style.zIndex = 0
    // 再改透明度
    slideNow.style.transitionDuration = '.3s'
    slideNow.style.opacity = 1
    slideNow.ontransitionend = function () {
        slidePrev.style.transitionDuration = '0s'
        slidePrev.style.opacity = 0
    }
    // 当前展示索引就是下一个要展示的上一张    
    prev = step
}
/* 向右切换【向左移动】 */
const moveRight = function moveRight() {
    step++
    if (step >= count) step = 0
    move()
}



/* 向左切换【向右移动】 */
const moveLeft = function moveRight() {
    step--
    if (step < 0) step = count - 1
    move()
}

// 点击左右导航按钮
btnPrev1.onclick = utils.throttle(moveLeft)
btnNext1.onclick = utils.throttle(moveRight)

})()

